import React, { useEffect, useState } from 'react'
import http from '../../api/http'
import { NavBar, Toast, Card } from 'antd-mobile'
import { SubmitBar } from 'react-vant';
import { useLocation, useNavigate,useSearchParams } from 'react-router-dom'

function Index() {
    let navigate = useNavigate()
    const { state } = useLocation()
    const [sp] = useSearchParams()
  const title = sp.get('title');
  const price =state.price
//   const id = sp.get('id');
const id = Math.random().toString().slice(2,6)

    const payList = async() =>{
        const res = await http.get('/api/pay',{params:{title,id,price}})
        console.log(res)
    }
    useEffect(()=>{
        payList()
    },[])
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>订单</NavBar>
            <Card title='订单' >


                <div style={{border:'1px solid #000',padding:'10px'}}>
                    <div>订单号:{state.id}</div>

                    <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', margin: '30px' }}>
                        <span>
                            {state.start}
                        </span>
                        <span> → </span>
                        <span>
                            {state.end}
                        </span>
                    </div>

                    <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', margin: '30px' }}>
                        <span>{state.startTime}</span>
                        <span> → </span>
                        <span>{state.endTime}</span>
                    </div>
                    <div style={{ fontWeight: 'bold', fontSize: '20px', color: 'red' }}>
                        价格: ￥{state.price}
                    </div>
                </div>


            </Card>
            <div>
                <SubmitBar price={state.price*100} buttonText="提交订单" 
                // onSubmit={()=>navigate(`/pay?title=确认&price=${price}&id=${id}`)}
                onSubmit={()=>navigate('/pay')}
                />
            </div>
        </div>
    )
}

export default Index
